<template>
  <div class="home">
    <el-container>
      <el-aside
        width="200px"
        style="background-color: mediumslateblue; min-height: 100vh"
      >
        <el-scrollbar>
          <el-menu :default-openeds="['1', '3']">
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <!-- <message /> -->
                  <i class="iconfont icon-icon_view2"></i>
                </el-icon>
                部门信息
              </template>
              <!-- <el-menu-item-group> -->
              <!-- <template #title>第一分组</template> -->
              <!-- <el-menu-item index="1-1">技术部</el-menu-item>
                <el-menu-item index="1-2">运营部门</el-menu-item> -->
              <!-- </el-menu-item-group> -->
              <!-- <el-menu-item-group title="第二分组"> -->
              <!-- <el-menu-item-group>
                <el-menu-item index="1-3">测试组</el-menu-item>
              </el-menu-item-group> -->
              <el-sub-menu index="1-4">
                <template #title>前端开发</template>
                <el-menu-item index="1-4-1">HTML5</el-menu-item>
                <el-menu-item index="1-4-2">IOS</el-menu-item>
                <el-menu-item index="1-4-3">Android</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main
          >Main
          <!-- <el-icon><add-location /></el-icon> -->
          <i class="iconfont icon-icon_feedback_s" style="fontsize: 28px"></i>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts">
// import { Message, Menu as IconMenu, Setting } from '@element-plus/icons-vue'
import { onMounted } from "vue-demi";

export default {
  setup() {
    onMounted(() => {
      console.log("创建仓库");
    });
    return {};
  },
};
</script>
<style lang="scss" scoped>
.home {
  .common-layout {
    .el-header,
    .el-footer {
      background-color: #b3c0d1;
      color: var(--el-text-color-primary);
      text-align: center;
      line-height: 60px;
    }

    .el-footer {
      line-height: 60px;
    }

    .el-aside {
      background-color: #d3dce6;
      color: var(--el-text-color-primary);
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #e9eef3;
      color: var(--el-text-color-primary);
      text-align: center;
      line-height: 160px;
    }

    body > .el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
    .icon_message {
      width: 20px;
      height: 20px;
      font-size: 28px;
      color: red;
    }
  }
}
</style>
